<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title></title>
  <style>
    .el-header{
            text-align: center;
            font-size: 35px;
            font-weight: 500;
        }
      [v-cloak]{
        display:none;
      }
    </style>
</head>
<body>
<div id="app" v-cloak>
  <el-header>
    <span>个人信息查询</span>
  </el-header>

  <el-descriptions class="margin-top" :column="2" border>
    <template slot="extra">
      <el-button plain @click="supple" id="btn" lable="btn">去完善</el-button>
    </template>

    <el-descriptions-item>
      <template slot="label">
        <i class="el-icon-user"></i>
        头像
      </template>
      <div v-if="PersonInfo.userImage==''">未添加</div>
      <div v-if="PersonInfo.userImage!=''">
        <div class="demo-basic--circle">
          <div class="block">
            <el-avatar shape="square" :size="50" :src="PersonInfo.userImage"></el-avatar>
          </div>
        </div>
      </div>

    </el-descriptions-item>

    <el-descriptions-item>
      <template slot="label">
        <i class="el-icon-user"></i>
        姓名
      </template>
      {{PersonInfo.userName}}
    </el-descriptions-item>

    <el-descriptions-item>
      <template slot="label">
        <i class="el-icon-user"></i>
        学号
      </template>
      {{PersonInfo.userId}}
    </el-descriptions-item>

    <el-descriptions-item>
      <template slot="label">
        <i class="el-icon-mobile-phone"></i>
        身份
      </template>
      <div v-if="PersonInfo.userStatus==1">学生</div>
      <div v-if="PersonInfo.userStatus==2">老师</div>
    </el-descriptions-item>

    <el-descriptions-item>
      <template slot="label">
        <i class="el-icon-mobile-phone"></i>
        手机号
      </template>
      {{PersonInfo.userPhone}}
    </el-descriptions-item>

    <el-descriptions-item>
      <template slot="label">
        <i class="el-icon-mobile-phone"></i>
        邮箱
      </template>
      {{PersonInfo.userEmail}}
    </el-descriptions-item>

    <el-descriptions-item>
      <template slot="label">
        <i class="el-icon-mobile-phone"></i>
        年龄
      </template>
      {{PersonInfo.userAge}}
    </el-descriptions-item>

    <el-descriptions-item>
      <template slot="label">
        <i class="el-icon-mobile-phone"></i>
        性别
      </template>
      <div v-if="PersonInfo.userSex==1">男</div>
      <div v-if="PersonInfo.userSex==2">女</div>
      <div v-if="PersonInfo.userSex==''">未选择</div>
    </el-descriptions-item>

    <el-descriptions-item>
      <template slot="label">
        <i class="el-icon-mobile-phone"></i>
        生日
      </template>
      {{PersonInfo.birthday}}
    </el-descriptions-item>

    <el-descriptions-item :span="2">
      <template slot="label">
        <i class="el-icon-tickets"></i>
        个性签名
      </template>
      {{PersonInfo.userDesc}}
    </el-descriptions-item>
  </el-descriptions>

</div>

<script src="../js/vue.js"></script>
<!-- 引入样式 -->
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<!-- 引入组件库 -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script src="../js/axios-0.18.0.js"></script>

<script>
    new Vue({
        el:"#app",
        data() {
            return {
                 PersonInfo:{
                    userId:'',
                    userName:'',
                    userStatus:'',
                    userImage:'',
                    userPhone:'未完善',
                    userEmail:'未完善',
                    birthday: '未完善',
                    userSex: '',
                    userAge:'未完善',
                    userDesc: '暂未添加'
                 }
            }
        },
        mounted(){
                axios({
                        method:'get',
                        url:"http://localhost:8080/addInfo/lookInfo",
                        headers:{
                            'Authorization':localStorage.getItem('token')
                        }
                }).then(result=>{
                  if(result.data.code==1){
                    document.getElementById("btn").innerHTML='修改信息';
                    var d=new Date(result.data.data.birthday);
                    result.data.data.birthday=d.getFullYear()+'年'+(d.getMonth()+1)+'月'+d.getDate()+'日';
                    this.PersonInfo=result.data.data;
                  }else if(result.data.code==0){
                    this.PersonInfo.userId=result.data.data.userId;
                    this.PersonInfo.userName=result.data.data.userName;
                    this.PersonInfo.userStatus=result.data.data.userStatus;
                  }
               })
        },
        methods:{
          supple(){
            var ms=document.getElementById("btn").innerText;
            if(ms=='去完善'){
              location.href="AddPersonInfo.html"
            }else if(ms=='修改信息'){
              location.href="ModifyInfo.html";
            }
          }
        }
    })
</script>
</body>
</html>